<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Live input record and playback</title>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>

  <h1>HTM5 页面 js 录制语音demo</h1>

  <p>这是个简单的demo。并可上传到后端</p>
  <button onclick="startRecording(this);">录制</button>
  <button onclick="stopRecording(this);" disabled>停止</button>
  <button onclick="funUpload(this);" id="btnUpload" >上传</button>

  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>
  
  <h2>Log</h2>
  <pre id="log"></pre>

  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;
  var mp3Blob;


  //获取权限
  function startUserMedia(stream) {
      var input = audio_context.createMediaStreamSource(stream);

    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
      recorder = new Recorder(input);
      __log('初始化完成');
  }

  //开始录制
  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('录制中...');
  }

  //停止录制
  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('停止 录制.');
    __log('录音结束，音频文件导出中...');
      recorder && recorder.exportWAV(function(blob) {
          __log('导出成功');

        mp3Blob = blob;
        var url = URL.createObjectURL(blob);
        var li = document.createElement('li');
        var au = document.createElement('audio');
        var hf = document.createElement('a');

        au.controls = true;
        au.src = url;
        hf.href = url;
        hf.download = new Date().toISOString() + '.wav';
        hf.innerHTML = hf.download;
        li.appendChild(au);
        li.appendChild(hf);
        recordingslist.appendChild(li);
    });
    recorder.clear();
  }

  //api
  var url = "";
  //上传数据
  function funUpload() {
      var fd = new FormData();
//            fd.append('resourceType',1);
      fd.append('file', mp3Blob);
      //上传数据
      $.ajax({
          url: url,
          type: 'POST',
          data: fd,
          async: true,
          cache: false,
          contentType: false,
          processData: false,
          success: function (data) {
              alert("success");
          },
          error: function (jqXHR, textStatus, errorThrown) {
              alert(textStatus + "---" + errorThrown);
          }
      });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      __log('开始初始化...');
//      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
  </script>

  <script src="../dist/recorder.js"></script>
  <script src="../lib/jquery-1.11.1.min.js"></script>
</body>
</html>
